<template>
  <div>
    <el-container>
      <el-header>
        <div>店铺管理系统</div>
      </el-header>
      <el-container>
        <el-aside width="200px">
           <el-col :span="12">
              <el-menu
                router
               width="100%"
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#67C23A"
                text-color="#fff"
                active-text-color="#ffd04b">

                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>店铺管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/storeBackStageManage/storeInfo">
                      店铺信息
                   </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>

                 <el-submenu index="2">
                   <template slot="title">
                     <i class="el-icon-location"></i>
                       <span>餐品菜品管理</span>
                   </template>
                    <el-menu-item-group>
                      <el-menu-item index="/storeBackStageManage/productsInfo">
                        餐品管理
                      </el-menu-item>
                     <el-menu-item index="/storeBackStageManage/foodManage">
                    菜品管理
                   </el-menu-item>
                  </el-menu-item-group>
                 </el-submenu>

                      <el-submenu index="3">
                        <template slot="title">
                           <i class="el-icon-location"></i>
                           <span>店铺订单管理</span>
                          </template>
                           <el-menu-item-group>
                             <el-menu-item index="/storeBackStageManage/storeOrder">
                             订单信息
                            </el-menu-item>
                           </el-menu-item-group>
                             </el-submenu>

                <el-submenu index="4">
                  <template slot="title">
                    <i class="el-icon-s-shop"></i>
                    <span>商家管理</span>
                  </template>
                  <el-menu-item index="/storeManger">商家信息</el-menu-item>
                  <el-menu-item index="/approval">注册审批</el-menu-item>
                </el-submenu>

              </el-menu>
            </el-col>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
name: "StoreBackStageManage",
  methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>

<style scoped>
   /*.el-header, .el-footer {*/
   /*   !*background-color: #67C23A;*!*/
   /*   !*color: #333;*!*/
   /*   !*text-align: center;*!*/
   /*   !*line-height: 60px;*!*/
   /* }*/

    /*.el-aside {*/
    /*  background-color: #D3DCE6;*/
    /*  color: #333;*/
    /*  text-align: center;*/
    /*  line-height: 200px;*/
    /*}*/

    /*.el-main {*/
    /*  background-color: #E9EEF3;*/
    /*  color: #333;*/
    /*  text-align: center;*/
    /*  line-height: 160px;*/
    /*}*/

    /*body > .el-container {*/
    /*  margin-bottom: 40px;*/
    /*}*/

    /*.el-container:nth-child(5) .el-aside,*/
    /*.el-container:nth-child(6) .el-aside {*/
    /*  line-height: 260px;*/
    /*}*/

    /*.el-container:nth-child(7) .el-aside {*/
    /*  line-height: 320px;*/
    /*}*/

    /*.el-aside .el-col{*/
    /*  width: 100%*/
    /*}*/
</style>
